<template>
	<view class="p-20">
		<view class="u-flex u-row-left m-b-20">
			<view style="width: 150rpx;height: 150rpx;">
				<u-image :src="image" height="150rpx" width="150rpx" @tap="preview()" />
			</view>
			<view class="m-l-20" style="height: 150rpx;">
				<view style="width: 450rpx;">
					<view class="u-line-1 u-font-36">{{productInfo.storeName}}</view>
					<div class="u-flex u-row-between m-t-20">
						<price-style :info="price" />
						<div style="color: #909399;">库存：{{stock}}</div>
					</div>
				</view>

			</view>
		</view>
		<view>
			<view v-for="(v,k) in attrList" class="m-b-20">
				<view class="title">
					{{k}}
				</view>
				<view class="">
					<view style="display: inline-block;margin-top: 10rpx;" v-for="(item) in v" class="m-r-20">
						<u-tag border-color="#ffaa7f" color="#ff0000" :text="item"
							:bg-color="!(eattr[k]==item)?'#FFF':'#ffaa00'" @click="sAttr(k,item)" />
					</view>

				</view>
			</view>
		</view>
		<view>
			<view class="title">数量</view>
			<u-number-box :min="1" :max="100" v-model="num" :disabled-input="false" integer></u-number-box>
		</view>
		<view class="m-t-20">
			<u-button :custom-style="btn" v-if="!isBuy" @click="add()">加入购物车</u-button>
			<u-button :custom-style="btn" v-else @click="add1()">立即购买</u-button>
		</view>
	</view>
</template>

<script>
	import priceStyle from '@/components/priceStyle.vue'
	export default {
		components: {
			priceStyle
		},

		props: {
			productInfo: {
				type: Object,
				default: () => {
					return {}
				}
			},
			cartNum: {
				type: Number,
				default: 1
			},
			isBuy: {
				type: Boolean,
				default: false
			},
			addCart: {
				type: Function,
				default: () => {}
			},
			addBuyCart: {
				type: Function,
				default: () => {}
			},
		},
		data() {
			return {
				num: this.cartNum,
				stock: 0,
				aList: {},
				attrList: {},
				eattr: {},
				unique: '',
				price: {
					isMultiple: 0,
					isIntegral: 0,
					price: 0,
					integral: 0,
					brokeragePrice: 0
				},
				btn: {
					width: '100%',
					background: '#ffaa00',
					color: '#ff0000'
				},
				image: ''
			}
		},
		mounted() {

			if (this.productInfo.isMultiple == 1) {
				this.parseAttr(false, true)
				this.parseAttr(true, false)
			} else {
				this.unique = this.productInfo.attrList[0].unique
				this.price.price = this.productInfo.attrList[0].price
				this.price.integral = this.productInfo.attrList[0].integral
				this.price.brokeragePrice = this.productInfo.attrList[0].brokeragePrice
				this.stock = this.productInfo.attrList[0].stock
				this.image = this.productInfo.attrList[0].image
			}
			this.price.isIntegral = this.productInfo.isIntegral
			//this.price.isMultiple=this.productInfo.isMultiple
		},
		methods: {
			preview() {
				uni.previewImage({
					urls: [this.image],
					current: 0
				});
			},
			sAttr(k, v) {

				this.$set(this.eattr, k, v)
				let keys = Object.keys(this.eattr)
				let kk = ''
				let that = this
				keys.forEach(item => {
					kk += that.eattr[item]
				})
				let unique = this.aList[kk]

				if (unique != undefined) {
					this.unique = unique
					let index = this.productInfo.attrList.findIndex(item => item.unique == unique)
					let attr = this.productInfo.attrList[index];
					this.stock = attr.stock
					this.price.integral = attr.integral
					this.price.brokeragePrice = attr.brokeragePrice
					this.price.price = attr.price
					this.image = attr.image
				}
				this.parseAttr(true, false)
			},
			add() {
				this.addCart(this.num, this.unique)
			},
			add1() {
				this.addBuyCart(this.num, this.unique)
			},
			checkAttr(key, val) {
				let value = JSON.parse(JSON.stringify(this.eattr))
				value[key] = val
				let index = this.productInfo.attrList.findIndex(item => {
					return this.equalsObj(item.suk, value)
				})
				return index != -1
			},
			equalsObj(object1, object2) {
				var o1keys = Object.keys(object1);
				var o2keys = Object.keys(object2);
				if (o2keys.length !== o1keys.length) return false;
				for (let i = 0; i <= o1keys.length - 1; i++) {
					let key = o1keys[i];
					if (!o2keys.includes(key)) return false;
					if (object2[key] !== object1[key]) return false;
				}
				return true;
			},
			parseAttr(check, flag) {
				let keys = Object.keys(this.productInfo.attrList[0].suk)
				let attr = {}
				keys.forEach(item => {
					attr[item] = []
				})
				let that = this
				this.productInfo.attrList.forEach(item => {
					let suk = item.suk
					let ak = ''

					keys.forEach(k => {
						let index = attr[k].findIndex(a => a == suk[k])
						if (index == -1 && (!check || this.checkAttr(k, suk[k])))
							attr[k].push(suk[k])
						ak += suk[k]
						if (flag)
							that.$set(that.eattr, k, suk[k])
					})
					that.aList[ak] = item.unique
					if (flag) {
						this.stock = item.stock
						this.price.integral = item.integral
						this.price.brokeragePrice = item.brokeragePrice
						this.price.price = item.price
						this.unique = item.unique
						this.image = item.image
					}

					flag = false
				})
				this.attrList = attr;
			}
		}
	}
</script>

<style scoped lang="scss">
	.title {
		color: #909399;
		margin-bottom: 15rpx;
		font-size: 34rpx;
	}
</style>
